import React from "react";
import routeWithUserSession from "@/components/ApplicationArea/routeWithUserSession";
import PageHeader from "@/components/PageHeader";
import { ControllerType } from "@/components/items-list/ItemsList";
import { BrowserRouter as Router,Link } from 'react-router-dom';//
import Layout from "antd/lib/layout";
import Button from "antd/lib/button";
import Col from "antd/lib/col";
import Form from "antd/lib/form";
import Input from "antd/lib/input";
import Row from "antd/lib/row";
import Table from "antd/lib/table";
import ConfigProvider from "antd/lib/config-provider";
import Modal from "antd/lib/modal";
import Checkbox from "antd/lib/checkbox";
import zhCN from 'antd/es/locale/zh_CN';
import Tabletype from "@/services/tabletype";
import {createBrowserHistory} from 'history'
import notification from "@/services/notification";
import {get} from "lodash";
import routes from "@/services/routes";
import "./layoutheight.less";
import {WarningOutlined} from "@ant-design/icons";
const customHistory = createBrowserHistory();
const { confirm } = Modal;
class TabletypeList extends React.Component {
  state = {
    page: 1,
    pagesize: localStorage.getItem("tabletypelistpagesize") ? (localStorage.getItem("tabletypelistpagesize") !== undefined ? Number(localStorage.getItem("tabletypelistpagesize")) : 20) : 20,
    total:10,
    loading: false,
    name: '',
    data: [],
  };
  static propTypes = {
    controller: ControllerType.isRequired,
  };
    items=[{
      name:"cght",
      slug:"imgs",
      tags:"tags",
      is_draft:"df",
      is_archived:true
    }];
  componentWillMount() {
    let param={
      page: this.state.page,
      pagesize: this.state.pagesize,
      name: this.state.name,
      code: '',
    }
    this.fetch(param);
  }
  fetch = (params = {}) => {
    this.setState({ loading: true });
     Tabletype.getlist(params).then(data => {
        this.setState({
            loading: false,
            data:data.data,
            page: params.page,
            pagesize: params.pagesize,
            total: data.total,
        });
    });
  };
  handlesel = () => {
    let param={
      page: 1,
      pagesize: this.state.pagesize,
      name: this.state.name,
      code: '',
    }
    this.fetch(param);
  };
   handleTableChange = (pagination, filters, sorter) => {
    localStorage.setItem("tabletypelistpagesize", pagination.pageSize);
    let param={
      page: pagination.current,
      pagesize: pagination.pageSize,
      name: this.state.name,
      code: '',
    }
    this.fetch(param);
  };
  handleDelete = record => {
    if(record.status !==0)
    {
       notification.error("只有在草稿状态可以删除，删除失败！");
       return;
    }
    confirm({
      title: '确定删除单据?',
      icon: <WarningOutlined />,
      content: record.name,
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk: () => {
        Tabletype.delete(record).then(()=>{
          notification.success("单据删除成功.");
          let param={
            page: 1,
            pagesize: this.state.pagesize,
            name: this.state.name,
            code: '',
          }
          this.fetch(param);
        }).catch(error => {
          notification.error(get(error, "response.data.message", "删除失败."));
        });
      },
    });
  };
onDragEnter = info => {
    window.console.log(info);
  };
  render() {
    // const { currentPage } = this.state;
      const paginationProps = {
            showSizeChanger: true,
            // showQuickJumper: true,
            total: this.state.total, // 数据总数
            pageSize: parseInt(this.state.pagesize), // 每页条数
            current: parseInt(this.state.page), // 当前页码
            pageSizeOptions: ["10", "20", "30","100"],
            showTotal: ((total) => {
              return `共 ${total} 条`;
            }),
          };
        const listcolumns = [
      {
        title: '单据名称',
        key: 'name',
        dataIndex: 'name',
        render: (text, record) => (
          <Router  history={customHistory}>
            <Link to={`/tabletype/new/${record.id}`}>{text}</Link>
           </Router>
        ),
      },
      {
        title: '自动编号',
        dataIndex: 'numauto',
        key: 'numauto',
        render: (text, record) => (
          <span>
            <Checkbox checked={text}></Checkbox>
          </span>
        ),
      },
      {
        title: '手动编号',
        dataIndex: 'numhand',
        key: 'numhand',
        render: (text, record) => (
          <span>
            <Checkbox checked={text}></Checkbox>
          </span>
        ),
      },
      {
        title: '标志',
        dataIndex: 'numhead',
        key: 'numhead',
      },
      {
        title: '日期',
        dataIndex: 'numdate',
        key: 'numdate',
      },
      {
        title: '流水号',
        dataIndex: 'numfoot',
        key: 'numfoot',
      },
      {
        title: '流水号长度',
        dataIndex: 'footlenth',
        key: 'footlenth',
      },
    ];
    return (
  <ConfigProvider locale={zhCN}>
      <div className="container">
        <PageHeader title="单据列表"/>
      </div>
      <Layout className="ant-layout">
        <Layout className="ant-layout" style={{ padding: '0 24px 24px' }}>
         <Form layout="horizontal" {...{labelCol: { span: 4 }, wrapperCol: { span: 14 },} }>
          <Row>
				  <Col span={10}>
            <Form.Item style={{ marginBottom: 5 }} label="单据名称">
              <Input
                value={this.state.name}
                onChange={e => this.setState({name:e.target.value})}
                placeholder="单据名称"
              />
						</Form.Item>
				  </Col>
          </Row>
          <Row>
				  <Col span={10}>
          <Button type="primary" onClick={() => this.handlesel()} >
            <i className="fa fa-search m-r-5" />
            查询
          </Button>
				  </Col>
          </Row>
         </Form>
          <div>
              <Table rowKey='id'
                     columns={listcolumns}
                     dataSource={this.state.data}
                     pagination={paginationProps}
                     loading={this.state.loading}
                     onChange={this.handleTableChange}
              />
         </div>
        </Layout>
       </Layout>
  </ConfigProvider>
    );
  }
}


routes.register(
  "Tabletype.List",
  routeWithUserSession({
    path: "/tabletype",
    title: "单据号设置",
    render: pageProps => <TabletypeList {...pageProps} currentPage="tabletype" />,
  })
);

